import {
  type FC,
  type PropsWithChildren,
  memo,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import classNames from "classnames";
import { Option } from "rc-select";
import styles from "./index.module.scss";
import Select from "@/app/components/Select";
// import { useContentStore, useServerStore } from "@/store";
import Loading from "@/app/components/Loading";
import Icon, { svgMap } from "@/cvcomponents/Icon";
import { useContentStore } from "@/src/providers/content-store-provider";
import useServerStore from "@/app/components/hooks/useServerStore";

interface IndexProps {
  onIconChange?: (v: string) => void;
  onTitleChange?: (v: string) => void;
  iconKey?: keyof typeof svgMap;
  type: Sections;
}

const Index: FC<PropsWithChildren<IndexProps>> = ({ type }) => {
  // const { onOpenChange, isOpen } = useContext(Context)
  const { content, updateSection } = useContentStore(
    (state) => state
    // (o, n) => {
    //   return o.content[type] === n.content[type];
    // }
  );
  const { editSectionNameFn } = useServerStore();
  const data = content[type];
  const iconKey = data.iconKey;
  const displayName = data.displayName;
  const [showBtn, setShowBtn] = useState(false);
  const [loading, setLoading] = useState(false);
  const initTitle = useRef("");
  const initIconKey = useRef("");
  useLayoutEffect(() => {
    initTitle.current = displayName;
    initIconKey.current = iconKey;
  }, []);
  useLayoutEffect(() => {
    setShowBtn(
      displayName !== initTitle.current || iconKey !== initIconKey.current
    );
  }, [displayName, iconKey]);

  const renderHead = () => {
    // if (isOpen) {
    return (
      <div
        style={{ display: "flex", alignItems: "center", gap: "4px", flex: 1 }}
      >
        <Select
          style={{ width: "70px" }}
          value={iconKey}
          onChange={(e) => {
            // onIconChange?.(e || '')
            updateSection({ ...data, iconKey: e || "" }, type);
          }}
        >
          {Object.keys(svgMap).map((icon: any) => {
            return (
              <Option key={icon} value={icon}>
                <Icon name={icon}></Icon>
              </Option>
            );
          })}
        </Select>
        <input
          className={styles.input}
          value={displayName as string}
          onChange={(e) => {
            // onTitleChange?.(e.target.value)
            updateSection({ ...data, displayName: e.target.value }, type);
          }}
          type="text"
        />
        {showBtn && data?.id ? (
          <div
            className={classNames(styles.submitBtn, {
              [styles.forbid]: displayName.length === 0,
            })}
            onClick={async () => {
              if (displayName.length !== 0 && !loading) {
                if (data?.id) {
                  const res = await editSectionNameFn(data);
                  if (res?.code === 200) {
                    initTitle.current = displayName;
                    initIconKey.current = iconKey;
                    setShowBtn(false);
                  }
                  setLoading(false);
                }
              }
            }}
          >
            {loading ? (
              <Loading style={{ width: "20px" }} />
            ) : (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                style={{ width: "20px" }}
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path d="M0 0h24v24H0z" fill="none"></path>
                <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
              </svg>
            )}
          </div>
        ) : null}
      </div>
    );
    // }
    // else {
    //   return <div style={{ display: 'flex', gap: '4px', alignItems: 'center', flex: '1' }} onClick={() => {
    //     onOpenChange?.(!isOpen)
    //   }}>
    //     <Icon name={iconKey}></Icon>
    //     {displayName}
    //   </div>
    // }
  };
  return (
    // <div className={classNames(styles.head, { [styles.open]: isOpen })}>
    <div className={classNames(styles.head, styles.open)}>
      {renderHead()}
      {/* <div className={styles.arrow} onClick={() => {
        onOpenChange?.(!isOpen)
      }}>
        <svg style={{ width: '22px' }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" ><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path></svg>
      </div> */}
    </div>
  );
};

export default Index;
